<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM</title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p><!--w0==> dep0  -->
    <p v-text="msg"></p><!--w1 ==> dep0-->
    <p v-html="msg"></p><!--w2 ==> dep0-->
    <!--dep0 ==>[w0,w1,w2]-->


    <p>{{friend.name}}</p><!--w3 ==> {dep1,dep2}-->
    <!--dep1==>[w3]-->
    <!--dep2==>[w3]-->
    <button v-on:click="update">更新</button>
</div>
<script src="./mvvm-master/js/observer.js"></script>
<script src="./mvvm-master/js/compile.js"></script>
<script src="./mvvm-master/js/watcher.js"></script>
<script src="./mvvm-master/js/mvvm.js"></script>
<script>
    /*
    * 1. 实现数据绑定
    *   初始化显示: 页面(表达式/指令) 从data中读取数据进行显示(模版解析)
    *   更新 : 更新data中的属性数据  ===> 页面上更新
    * */
    const vm = new MVVM({
        el: "#app",
        data: {
            msg: "aa",//dep0
            friend:{//dep1
                name:"cc"//dep2
            }
        },
        methods:{
            update(){
//                this.msg = "cc";
                this.friend.name = "dd";
            }
        }
    });

    console.log(vm.name)

    /*
     * 1.数据绑定
     *
     * 1.数据绑定(效果)
     *   一旦更新了Data中的某个属性数据,所有界面上直接或者间接使用了此属性的节点都会发生更新
     *
     * 2.数据劫持(技术)
     *  1.数据劫持是vue中用来实现数据绑定的一种技术
     *  2.基本思想: 通过Object.defineProperty()来监视DATA中的所有的(所有层次)属性,一旦数据发生变化就去更新页面
     *
     * */


</script>
</body>
</html>